import React from 'react';
import './FileList.css';

const FileList = ({ filePairs, selectedPair, onPairSelect, onRemovePair }) => {
  if (!filePairs || filePairs.length === 0) {
    return null;
  }

  const formatFileSize = (bytes) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  return (
    <div className="file-list">
      <h3>📂 已导入的文件 ({filePairs.length})</h3>
      
      <div className="file-pairs">
        {filePairs.map((pair, index) => (
          <div 
            key={index}
            className={`file-pair ${selectedPair === pair ? 'selected' : ''}`}
            onClick={() => onPairSelect(pair)}
          >
            <div className="pair-header">
              <div className="pair-info">
                <span className="pair-number">#{index + 1}</span>
                <span className="audio-name">{pair.audio.name}</span>
              </div>
              <button 
                className="remove-btn"
                onClick={(e) => {
                  e.stopPropagation();
                  onRemovePair(index);
                }}
                title="移除此文件对"
              >
                ❌
              </button>
            </div>
            
            <div className="file-details">
              <div className="file-info audio-info">
                <span className="file-icon">🎵</span>
                <div className="file-meta">
                  <div className="file-name">{pair.audio.name}</div>
                  <div className="file-size">{formatFileSize(pair.audio.size)}</div>
                </div>
              </div>
              
              {pair.subtitle ? (
                <div className="file-info subtitle-info">
                  <span className="file-icon">📝</span>
                  <div className="file-meta">
                    <div className="file-name">{pair.subtitle.name}</div>
                    <div className="file-size">{formatFileSize(pair.subtitle.size)}</div>
                  </div>
                  <div className="match-score">
                    匹配度: {Math.round((pair.similarity || 0) * 100)}%
                  </div>
                </div>
              ) : (
                <div className="file-info no-subtitle">
                  <span className="file-icon">❌</span>
                  <div className="file-meta">
                    <div className="file-name">未找到匹配的字幕文件</div>
                    <div className="file-size">可手动添加SRT文件</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      <div className="file-list-actions">
        <button 
          className="clear-all-btn"
          onClick={() => {
            if (window.confirm('确定要清空所有文件吗？')) {
              filePairs.forEach((_, index) => onRemovePair(0));
            }
          }}
        >
          🗑️ 清空所有文件
        </button>
      </div>
    </div>
  );
};

export default FileList;